<template>
    <el-popover placement="bottom" :width="'90%'" class="popover" trigger="click">
        <template #reference>
            <div class="newtons-cradle">
                <div class="newtons-cradle__dot"></div>
                <div class="newtons-cradle__dot"></div>
                <div class="newtons-cradle__dot"></div>
                <div class="newtons-cradle__dot"></div>
            </div>
        </template>
        <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
            <el-table-column prop="filename" label="文件名" width="180" fixed>
                <template #default="scope">
                    <el-link :type="scope.row.process !== 100 ? 'primary' : 'success'" @click="toDetail(scope.row)">{{
                        scope.row.filename }}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="process" label="进度"  min-width="130">
                <template #default="scope">
                    <MyProgress :progress="scope.row.process"></MyProgress>
                </template>
            </el-table-column>
            <el-table-column prop="process" label="操作" width="60">
                <template #default="scope">
                    <!-- <el-icon color="#000" size="18" class="close" @click="deleteItem(scope.row)"><CircleClose /></el-icon> -->
                    <el-icon color="#000" size="18" class="close" v-show="!scope.row.isDownloading" @click="refresh(scope.row)"><RefreshRight /></el-icon>
                    <el-icon color="#000" size="18" class="close" v-show="scope.row.isDownloading" @click="pause(scope.row)"><VideoPause /></el-icon>
                </template>
            </el-table-column>
            <el-table-column prop="process" label="刪除" width="60">
                <template #default="scope">
                    <el-icon color="#000" size="18" class="close" @click="deleteItem(scope.row)"><CircleClose /></el-icon>
                </template>
            </el-table-column>
        </el-table>
    </el-popover>
</template>

<script lang="ts" setup>
import { computed } from "vue"
import MyProgress from "@/components/MyProgress.vue";
import { useDownloadStore } from "@/store/index"
import { storeToRefs } from "pinia"
import { useRouter } from "vue-router"
import { FileItf } from "@/interface";
const downloadStore = useDownloadStore()
const { tasksProcess } = storeToRefs(downloadStore)

interface DownloadFileItf {
    process: number;
    filename: string;
    isFinished: boolean;
    time: number;
    id: number;
    path: string;
    file: FileItf
}

const tableData = computed(() => {
    let arr: DownloadFileItf[] = []
    for (const key in tasksProcess.value) {
        let obj: DownloadFileItf = {
            ...tasksProcess.value[key],
            path: key
        }
        arr.push(obj)
    }
    return arr
})

const router = useRouter()
function toDetail(row: DownloadFileItf) {
    console.log(row.id);
    router.push(`/video/${row.id}`)
}

function deleteItem(row: DownloadFileItf){
    downloadStore.deleteDownLoad( row.file )
}

function refresh(row: DownloadFileItf){
    downloadStore.webWorkDownload( row.file )
}
function pause(row: DownloadFileItf){
    downloadStore.stopWebWorkDownload( row.file )
}

const tableRowClassName = ({
    row,
    rowIndex,
}: {
    row: DownloadFileItf
    rowIndex: number
}) => {
    row
    if (rowIndex === 1) {
        return 'warning-row'
    } else if (rowIndex === 3) {
        return 'success-row'
    }
    return ''
}
</script>
<style lang="scss" scoped>
.close{
    cursor: pointer;
}
.newtons-cradle {
    --uib-size: 30px;
    --uib-speed: 1.2s;
    --uib-color: #000;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--uib-size);
    height: var(--uib-size);
}

.newtons-cradle__dot {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    width: 25%;
    transform-origin: center top;
}

.newtons-cradle__dot::after {
    content: '';
    display: block;
    width: 100%;
    height: 25%;
    border-radius: 50%;
    background-color: var(--uib-color);
}

.newtons-cradle__dot:first-child {
    animation: swing var(--uib-speed) linear infinite;
}

.newtons-cradle__dot:last-child {
    animation: swing2 var(--uib-speed) linear infinite;
}

@keyframes swing {
    0% {
        transform: rotate(0deg);
        animation-timing-function: ease-out;
    }

    25% {
        transform: rotate(70deg);
        animation-timing-function: ease-in;
    }

    50% {
        transform: rotate(0deg);
        animation-timing-function: linear;
    }
}

@keyframes swing2 {
    0% {
        transform: rotate(0deg);
        animation-timing-function: linear;
    }

    50% {
        transform: rotate(0deg);
        animation-timing-function: ease-out;
    }

    75% {
        transform: rotate(-70deg);
        animation-timing-function: ease-in;
    }
}
</style>